﻿
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>
			HTML5与CSS3实现动态网页_html5与css3基础_html5学习路线-慕课网职业路径
	</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta property="qc:admins" content="77103107776157736375" />
	<meta property="wb:webmaster" content="c4f857219bfae3cb" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    
	<meta name="keywords" content="html5与css3基础，html5学习路线" />

    <meta name="viewport" content="width=device-width, initial-scale=1">
    
	<meta name="description" content="有HTML与CSS基础，却不知道如何进阶？本html5学习路线带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步" />

    <link rel="stylesheet" href="css/moco.min.css" type="text/css" />
    <link rel="stylesheet" href="css/common-less.css" type="text/css" />
    <script type="text/javascript">
        var OP_CONFIG = {"module":"sc","page":"index","userout":0};
			OP_CONFIG.isLogin = 0;
        var _msg_unread = 0;  
        var _not_unread = 0;  
        var _cart_num = 0;    
		var requirejsTimestamp="v=201705121112";
            </script>
	
    
<link rel="stylesheet" href="css/index-less_1.css" type="text/css"/>
<link rel="stylesheet" href="css/index-less_2.css" type="text/css"/>
<script>
OP_CONFIG.plan_id = "2";
OP_CONFIG.plan_name = "HTML5与CSS3实现动态网页";
</script>

	
    </head>

<body>

	<div id="header">
<div class="page-container" id="nav">
	<div id="logo" class="logo"><a href="http://www.imooc.com/" target="_self" class="hide-text" title="首页">慕课网</a></div>

	<div class="l">
		<ul class="nav-item l">
			<li><a href="http://www.imooc.com/course/list" target="_self">课程</a></li>
			<li><a class='program-nav active' href="http://class.imooc.com" target="_self">职业路径<i class="icn-new"></i></a></li>
			<li><a href="http://coding.imooc.com" target="_self">实战</a></li>
			<li><a href="http://www.imooc.com/wenda" target="_self">猿问</a></li>
			<li><a href="http://www.imooc.com/article" target="_self">手记</a></li>

					</ul>
	</div>
	
		<div id="login-area">
		<ul class="header-unlogin clearfix">
			<li class="shop-cart" id="shop-cart">
                <a href="http://order.imooc.com/pay/cart" class="shop-cart-icon" target="_blank">
                    <span class="imv2-cart"></span>
                    <span class="shopping_icon js-cart-num" data-ordernum="0"  data-cartnum="0" style='display: none'>0</span>
                    <span>购物车</span>
                </a>
                <div class="my-cart"  id="js-my-cart"></div>
            </li>

			<li class="header-signin">
				<a href="#" id="js-signin-btn">登录</a>
			</li>
			
			<li class="header-signup">
				<a href="#" id="js-signup-btn">注册</a>
			</li>
		</ul>
	</div>
		
	<div class='search-warp clearfix' style='min-width: 32px; height: 60px;'>
		<div class="pa searchTags js-searchtags" ></div>

		<div class="search-area" data-search="top-banner">
			<input class="search-input" data-suggest-trigger="suggest-trigger" placeholder="请输入想搜索的内容..." type="text" autocomplete="off">
			<input type='hidden' class='btn_search' data-search-btn="search-btn" />
			<ul class="search-area-result" data-suggest-result="suggest-result"></ul>
		</div>
		<div class='showhide-search' data-show='no'><i class='imv2-search'></i></div>
	</div>
</div>
</div>

<div class='body-main'>

<div class="banner" style="background-image: url(images/58a6c83f0001e6f016000960.jpg);">
    <div class="container">
		<!-- 面包屑 & 分享 -->
		<div class='path'>
			<a href='http://www.imooc.com/course/program'>职业路径</a> \ <a href='/sc/2'>HTML5与CSS3实现动态网页</a>
		</div>
		
		<div class='share'>
			<div class="bdsharebuttonbox" data-tag="">
				<a href="javascript:;" class="share wx imv2-weixin" data-cmd="weixin"></a>
                <a href="javascript:;" class="share qq imv2-qq" data-cmd="qzone"></a>
                <a href="javascript:;" class="share sina imv2-weibo" data-cmd="tsina"></a>
			</div>
		</div>
		<!-- 面包屑 & 分享 end -->
	
        <h2 class='cat_name'>Web前端攻城狮培养计划</h2>
		<p class='name'>HTML5与CSS3实现动态网页</p>
		
		<!-- 导学视频 -->
					<div class='video-btn js-video-start' data-videourl='http://clvideo.mukewang.com/590fe831e420e5a6038b459b/H.mp4'></div>
				<!-- 导学视频 end -->
		
		<div class='sc-info clearfix'>
			<dl class='info-wrap'>
				<dt>包含课程</dt>
				<dd>29</dd>
			</dl>
			
			<div class='sc-info-line'></div>
			
			<dl class='info-wrap'>
				<dt>视频时长</dt>
								<dd>32h</dd>
							</dl>
			
			<div class='sc-info-line'></div>
			
			<dl class='info-wrap'>
				<dt>学习人数</dt>
				<dd>1084</dd>
			</dl>
			
			<div class='sc-info-line'></div>
			
			<dl class='info-wrap'>
				<dt>综合评分</dt>
				<dd>9.87</dd>
			</dl>
			
							<a href="javascript:;" class="js-buy-trigger buy-trigger">立即购买</a>
						
			<div class='price'>￥599.00</div>
		</div>
	</div>
</div>

<div id='pageNav' class='page-nav'>
		<a class='active' href='/sc/2'>详情介绍</a>
	    <a href='/sc/2/publicevaluation' >同学评价<span>236</span></a>
	<a href='/sc/consult/2' target="_blank">路径咨询<span>16</span></a>
</div>

<div id="Anchor"></div>

<input type='hidden' value='index' id='scPage' />

<div class='hide' id='modal-buy-html'>
	<div id='modal-buy' class='modal-buy'>
		<div class='modal-buy-title'>
			<h2>购买课程</h2>
			<a href='/user/faq'>帮助?</a>
		</div>
		
		<div class='modal-buy-bady'>
			<h3>HTML5与CSS3实现动态网页</h3>
			
			<div class='price'>￥599.00</div>
				
			<p>为你提供 <b>120天</b> <span>路径学习服务</span> 2017.05.12-2017.09.09</p>
			<p>附赠两次免费延期，每次30天</p>
		</div>
		<div class='modal-buy-bottom clearfix'>
			<a href='javascript:;' class='moco-btn moco-btn-normal l cancel'>取消</a>
			<a href='javascript:;' class='moco-btn moco-btn-red r pay'>立即支付</a>
		</div>
	</div>
</div>
<!-- 视频 -->
<div id="js-index-video" class="video-container">
  <div class="video-wrap" id="js-video-wrap">
    <div id="js-video"></div>
  </div>
  <div class="video-mask"></div>
  <div id="js-video-close" class="video-close imv2-close"></div>
</div>
<!-- 视频end -->
<div id='scmain' class='scmain'>

<!-- 步骤展示 -->
<div class="step-wrap" id="Step">
			<h2 class="step-title">
			<span>步骤1:</span>
			初识HTML5
		</h2>
		<p class="step-desc">本阶段内容主要涵盖HTML5新增、删除标签、标签属性变化以及HTML5布局知识。通过本阶段学习，大家可以运用HTML5标签轻松实现网页音乐播放器和视频播放器，熟练运用HTML5的语义化标签进行静态网页的开发。</p>
		
		<ul class="clearfix">
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第1课
					</div>
					<div class='sc-cart-b'>
						<h3>
							HTML5标签变化						</h3>
						
						<p class="sc-cart-info">
															HTML5文档类型如何定义，有哪些标签，以及如何使用，从整体认识HTML5						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第2课
					</div>
					<div class='sc-cart-b'>
						<h3>
							HTML5网页布局						</h3>
						
						<p class="sc-cart-info">
															传统布局与HTML5网页布局的区别和意义，通过案例讲解如何使用HTML5搭建网页						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第3课
					</div>
					<div class='sc-cart-b'>
						<h3>
							HTML5属性变化						</h3>
						
						<p class="sc-cart-info">
															了解这些属性带来的好处，加深对标签的认识，将提高以后的开发效率						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第4课
					</div>
					<div class='sc-cart-b'>
						<h3>
							HTML5展望						</h3>
						
						<p class="sc-cart-info">
															HTML5快速发展，它还有哪些强大的功能，在什么领域可以使用，以及它的发展方向						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第5课
					</div>
					<div class='sc-cart-b'>
						<h3>
							HTML5测试						</h3>
						
						<p class="sc-cart-info">
															本课为考评，满分100学分，共20道题，限时30分钟						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
				</ul>
			<h2 class="step-title">
			<span>步骤2:</span>
			搞懂CSS3
		</h2>
		<p class="step-desc">本阶段内容主要涵盖CSS3选择器、边框与圆角、背景与渐变、转换、过渡、动画等知识。通过本阶段学习，大家将学会更加精确得控制页面的布局、字体、颜色、背景等效果，实现非常炫酷的CSS3动画特效，让网页丰富多彩。</p>
		
		<ul class="clearfix">
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第1课
					</div>
					<div class='sc-cart-b'>
						<h3>
							CSS3选择器						</h3>
						
						<p class="sc-cart-info">
															详细讲解CSS3的变化，新的概念和理念，及其CSS3新增加的选择器						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第2课
					</div>
					<div class='sc-cart-b'>
						<h3>
							CSS3边框与圆角						</h3>
						
						<p class="sc-cart-info">
															带来神奇的圆角边框、阴影框及其图片边框等，非常具有实用价值的新属性						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第3课
					</div>
					<div class='sc-cart-b'>
						<h3>
							CSS3背景与渐变						</h3>
						
						<p class="sc-cart-info">
															同样神奇的背景控制属性，以及如何使用颜色过渡实现漂亮的渐变效果						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第4课
					</div>
					<div class='sc-cart-b'>
						<h3>
							CSS3转换						</h3>
						
						<p class="sc-cart-info">
															深入讲解元素如何扭曲、移位或旋转，让我们可以更自由得装饰和变形HTML组件						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第5课
					</div>
					<div class='sc-cart-b'>
						<h3>
							CSS3过渡						</h3>
						
						<p class="sc-cart-info">
															一起探索如何通过CSS3属性值的变化实现动画效果，如何触发这些动画产生交互						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第6课
					</div>
					<div class='sc-cart-b'>
						<h3>
							CSS3动画						</h3>
						
						<p class="sc-cart-info">
															使用animation属性，实现以往要用Flash等动画软件才能完成的炫酷效果						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第7课
					</div>
					<div class='sc-cart-b'>
						<h3>
							CSS3图片切换特效						</h3>
						
						<p class="sc-cart-info">
															介绍了几种非常漂亮的图片切换特效，大家对CSS3的认识会有质的提高						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第8课
					</div>
					<div class='sc-cart-b'>
						<h3>
							CSS3测试						</h3>
						
						<p class="sc-cart-info">
															本课为考评，满分100学分，共25道题，限时37分钟						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
				</ul>
			<h2 class="step-title">
			<span>步骤3:</span>
			JavaScript基础
		</h2>
		<p class="step-desc">本阶段内容主要涵盖js基础语法、流程控制语句、函数、内置对象、DOM基础和事件、BOM基础等知识。通过本阶段学习，大家不仅可以掌握js的基础知识，还能学会网站开发中常用的图片轮播特效。</p>
		
		<ul class="clearfix">
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第1课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript语法						</h3>
						
						<p class="sc-cart-info">
															初步了解JavaScript语言，掌握它的语法、数据类型、基本的算数和逻辑运算操作						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第2课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript流程控制语句						</h3>
						
						<p class="sc-cart-info">
															掌握JavaScript中条件分支语句和循环语句的使用，用简洁的代码实现强大功能						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第3课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript函数						</h3>
						
						<p class="sc-cart-info">
															掌握函数的使用，学习函数的封装，体会代码复用的过程和它带来的便利						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第4课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript内置对象						</h3>
						
						<p class="sc-cart-info">
															学习内置对象的常用属性和方法，方便我们开发中直接调用，进而实现更多功能						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第5课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript DOM基础						</h3>
						
						<p class="sc-cart-info">
															DOM的方法和属性既可以获取网页中的元素，也可以设置元素的内容、样式及效果						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第6课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript DOM事件						</h3>
						
						<p class="sc-cart-info">
															为页面中的元素绑定键盘或鼠标事件，从而可以触发和实现我们想要的交互效果						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第7课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript BOM基础						</h3>
						
						<p class="sc-cart-info">
															学习浏览器对象模型“BOM”，可以对浏览器窗口进行访问和操作，与浏览器“对话”						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第8课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript实现轮播特效						</h3>
						
						<p class="sc-cart-info">
															综合运用JavaScript知识，做出轮播图、tab页切换等实用特效						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第9课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript基础测试						</h3>
						
						<p class="sc-cart-info">
															本课为考评，满分100学分，共25道题，限时37分钟						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
				</ul>
			<h2 class="step-title">
			<span>步骤4:</span>
			JavaScript进阶
		</h2>
		<p class="step-desc">本阶段，将带领大家进一步探索JavaScript中的奥秘，教大家如何使用调试工具。还有变量、作用域、函数是怎么样来运用， 以及它们之前的关系是怎样的，我们来一步一步揭开它们的面纱。</p>
		
		<ul class="clearfix">
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第1课
					</div>
					<div class='sc-cart-b'>
						<h3>
							调试工具						</h3>
						
						<p class="sc-cart-info">
															这节课，我们将带领大家去学习调试工具，看如何快速调试代码，实时预览，带领大家体验一下代码快速调试。						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第2课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript变量、作用域						</h3>
						
						<p class="sc-cart-info">
															通过本课程的学习，我们将去探究变量、作用域的本质，了解变量、作用域的定义以及使用						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第3课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript函数深入讲解						</h3>
						
						<p class="sc-cart-info">
															通过本课程的学习，我们将去探究函数的本质，了解函数的定义和调用以及函数的参数和返回值						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第4课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript实现简易计算器						</h3>
						
						<p class="sc-cart-info">
															这节课，我们将带领大家去做一个简易的计算器，看代码如何一步步的被优化，带领大家体验一下代码的简约不简单。









						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第5课
					</div>
					<div class='sc-cart-b'>
						<h3>
							JavaScript进阶测试						</h3>
						
						<p class="sc-cart-info">
															本课为考评，满分100学分，共20道题，限时30分钟						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
				</ul>
			<h2 class="step-title">
			<span>步骤5:</span>
			项目实战
		</h2>
		<p class="step-desc">光学不练假把式，实践是巩固知识最好的方法，本环节，带领大家开发炫酷网页，从实践中总结经验并且提升解决问题的能力。</p>
		
		<ul class="clearfix">
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第1课
					</div>
					<div class='sc-cart-b'>
						<h3>
							H5+CSS3+JS实现炫酷网页						</h3>
						
						<p class="sc-cart-info">
															带领大家实现真实项目：“慕课手机宣传页”，面对综合需求，大展身手的时候到了！						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
					<div class='sc-course-cart'>
				<div class='sc-course-cart-wrap'>
					<div class='sc-cart-t'>
						第2课
					</div>
					<div class='sc-cart-b'>
						<h3>
							实战测试						</h3>
						
						<p class="sc-cart-info">
															本课为考评，满分100学分，共20道题，限时30分钟						</p>
					</div>
				</div>
				<div class='sc-course-cart-axis'>
					<div class='relative'>
						<div class='axisx'></div>
						<div class='axisy'></div>
					</div>
				</div>
			</div>
				</ul>
		
	<div class="view-more js-get-all-step">
		<i class="imv2-add_circle_o"></i>
		查看完整路径步骤
	</div>
	
</div>
<!-- 步骤展示 end -->

<div class="appendtemplate">
	<!-- 成果展示 -->
<div class="succ-show-box w1200" id="Show">
	<p class="succ-title">前端开发不神秘</p>
	<p class="succ-text">本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。我们将一起完成应用以下丰富功能的动态网页</p>
	<div class="img-box">
		<img src="picture/2-1.png" class="animated">
	</div>
	<div class="plan-detail">
		<ul class="clearfix">
			<li class="l">
				<p class="small-title">导航菜单</p>
				<p>几乎所有网站的首页都会用到</p>
				<em></em>
			</li>
			<li class="l">
				<p class="small-title">导航条双向绑定</p>
				<p>侧边导航和头部导航双向绑定准确定位</p>
				<em></em>
			</li>
			<li class="l">
				<p class="small-title">CSS3动画</p>
				<p>鼠标经过图片进行动态翻转、旋转动态变化</p>
				<em></em>
			</li>
			<li class="l">
				<p class="small-title">滑动门特效</p>
				<p>导航菜单中跟随鼠标的移动元素进行变化</p>
				<em></em>
			</li>
			<li class="l">
				<p class="small-title">滚动视差</p>
				<p>鼠标滚动到特定位置时，内容跟随加载</p>
				<em></em>
			</li>
			<li class="l">
				<p class="small-title">锚点跳转</p>
				<p>根据链接元素定位到网页中想要查看的位置</p>
			</li>
		</ul>
	</div>
</div>
<!-- 成果展示 end -->

<!-- 学习服务 -->
<div class="learn-service-wrap" id="Service">
	<div class="learn-service-box w1056">
		<p class="big-title">有趣 有效 只学有用的</p>
		<ul class="service-list">
			<li class="clearfix">
				<img src="picture/service1.png" class="l mr150">
				<div class="service-text-box l">
					<p class="small-title">专家级教学团队</p>
					<p>拥有多年教学经验的专家级教学团+一线公司大牛，高超的授课技巧+实战视野，让你理论和实践知识兼得</p>
				</div>
			</li>
			<li class="clearfix">
				<div class="service-text-box l textr">
					<p class="small-title">高品质增值服务</p>
					<p>热情的同学和教学团队，会在问答区及时解答你学习上的疑问</p>
					<p>1V1作业批改，帮你针对性解决实践过程中遇到的困难</p>
				</div>
				<img src="picture/service2.png" class="l ml126">
			</li>
			<li class="clearfix">
				<img src="picture/service3.png" class="l mr130">
				<div class="service-text-box l">
					<p class="small-title">游戏关卡式学习</p>
					<p>扎实的知识基础，会让你的进步事半功倍！完成每门课的学习目标，解锁新的学习领域，一步一脚印，一定收获满满</p>
				</div>
			</li>
			<li class="clearfix">
				<div class="service-text-box l textr">
					<p class="small-title">学习数据全跟踪</p>
					<p>全面记录学习数据，学习情况一目了然，帮你提高学习效率</p>
					<p>获取学分达到标准后，将获得本路径的通关证书</p>
				</div>
				<img src="picture/service4.png" class="l ml126">
			</li>
			<li class="clearfix">
				<img src="picture/service5.png" class="l mr150">
				<div class="service-text-box l">
					<p class="small-title">免费延期等你拿</p>
					<p>现在加入 额外赠送60天学习时间</br>路径学习期限：120天+（赠送60天）=180天</p>
				</div>
			</li>
		</ul>
		<div class="adjust-person">
			<p class="big-text">适合人群</p>
			<p>掌握HTML语言、CSS样式的基础知识</p>
		</div>
	</div>
</div>
<!-- 学习服务 end -->






								













</div>

<!-- 用户评价 -->
<div class="user-evaluation-box" id="Comment">
<!-- 用户评价 -->
<div class="user-evalustion">
	<h2>万事俱备 只等你来</h2>
	<ul class="clearfix">
				<li class="l">
			<div class="user-box clearfix">
				<img src="picture/5458458d000181e402200220-100-100.jpg" width="64" height="64">
				<p class="user-name">慕粉1473896241</p>
				<div class="user-text-box">
					<p class="star js-bstar">
						<span class='star'><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i></span>
					</p>
				</div>
			</div>
			<p class="content" title="老师讲的很细，也很明白，布置作业还有编程题选择题，题型很全面，也针对于基础，问老师题，能很快的反馈。这个课程很棒">老师讲的很细，也很明白，布置作业还有编程题选择题，题型很全面，也针对于基础，问老师题，能很快的反馈。这个课程很棒</p>
		</li>
				<li class="l">
			<div class="user-box clearfix">
				<img src="picture/581ae7a3000177e302000200-100-100.jpg" width="64" height="64">
				<p class="user-name">烁罡</p>
				<div class="user-text-box">
					<p class="star js-bstar">
						<span class='star'><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i></span>
					</p>
				</div>
			</div>
			<p class="content" title="之前在W3C学过基础，但是并没有真正运用上，从这门课程学到了很多，细致化的讲解了每个语言的技巧，不会的还能去问答区提问，真的还是不错的。。推荐">之前在W3C学过基础，但是并没有真正运用上，从这门课程学到了很多，细致化的讲解了每个语言的技巧，不会的还能去问答区提问，真的还是不错的。。推荐</p>
		</li>
				<li class="l">
			<div class="user-box clearfix">
				<img src="picture/5783913d0001ebad06400640-100-100.jpg" width="64" height="64">
				<p class="user-name">weixin_欣欣然_03647380</p>
				<div class="user-text-box">
					<p class="star js-bstar">
						<span class='star'><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i><i class="imv2-star on"></i></span>
					</p>
				</div>
			</div>
			<p class="content" title="老师很棒的点评。解决了我课程和作业中遇到的问题。通过这次作业与老师的交流，有一种很实在的感觉。
我很喜欢这样的学习模式。很酷又很棒">老师很棒的点评。解决了我课程和作业中遇到的问题。通过这次作业与老师的交流，有一种很实在的感觉。
我很喜欢这样的学习模式。很酷又很棒</p>
		</li>
			</ul> 
	<a href="/sc/2/publicevaluation" class="more">查看全部<span>236</span>条用户评价</a>
</div>
<!-- 用户评价 end --></div>
<!-- 用户评价 end -->



<div id='Prchor'></div>
<div class='consultation' id='consultation'>
	<div class='w1200'>
		<div class='consultation-search-wrap clearfix'>
			<input type='text' class='consultation-search' placeholder="输入你的路径咨询问题" />
			<input type='button' class='consultation-search-btn' value='提问'>
		</div>
		<div class='consultation-search-result'>
			<div class='js-consultation-search-result clearfix'>
				<div class='loding-w'>
					<i class='imv2-loading'></i>
					<div class='text'>数据加载中...</div>
				</div>
			</div>
			<p class='hrefall'>
				<a target="_blank" href='/sc/consult/2'>查看全部 <span></span> 条已回复的咨询</a>
			</p>
		</div>
	</div>
</div>

<!-- 用户评价end -->

</div>


<!-- 顶部吸附条 -->
<div class='js-fixed sc-fixed'>
	<h3 class='fixed-course-name'>HTML5与CSS3实现动态网页</h3>
	
	<div class='sc-fixed-nav clearfix'>
				<a class='active' href='/sc/2'>详情介绍</a>
		<div class='two-level clearfix'>
			<a id='top1' class='two-level-nav' href='#pageNav'>所含课程<i class='imv2-pin'></i></a>
			<a id='top2' class='two-level-nav' href='#Show'>成果展示<i class='imv2-pin'></i></a>
			<a id='top3' class='two-level-nav' href='#Service'>学习服务<i class='imv2-pin'></i></a>
		</div>
				<a href='/sc/2/publicevaluation' >同学评价<span>236</span></a>
		<a href='/sc/consult/2' target="_blank">路径咨询<span>16</span></a>
	</div>
	
			<a href="javascript:;" class="js-buy-trigger buy-trigger">立即购买</a>
		<div class='price'>￥599.00</div>
</div>
<!-- 顶部吸附条end -->

</div>


	<div id="footer">
<div class="waper">
    <div class="footerwaper clearfix">
        <div class="followus r">
            <a class="followus-weixin" href="javascript:;"  target="_blank" title="微信">
                <div class="flw-weixin-box"></div>
            </a>
            <a class="followus-weibo" href="http://weibo.com/u/3306361973"  target="_blank" title="新浪微博"></a>
            <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
        </div>
        <div class="footer_intro l">
            <div class="footer_link">
                <ul>
                    <li><a href="http://www.imooc.com/" target="_blank">网站首页</a></li>
                    <li><a href="http://www.imooc.com/about/cooperate" target="_blank" title="企业合作">企业合作</a></li>
                    <li><a href="http://www.imooc.com/about/job" target="_blank">人才招聘</a></li>
                    <li> <a href="http://www.imooc.com/about/contact" target="_blank">联系我们</a></li>
                    <li> <a href="http://www.imooc.com/about/recruit" target="_blank">讲师招募</a></li>
                     <li> <a href="http://class.imooc.com/user/faq" target="_blank">常见问题</a></li>
                    <li> <a href="http://class.imooc.com/user/feedback" target="_blank">意见反馈</a></li>
                    <li><a href="http://daxue.imooc.com/" target="_blank">慕课大学</a></li>
                    <li> <a href="http://www.imooc.com/about/friendly" target="_blank">友情链接</a></li>
                </ul>
            </div>
            <p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
        </div>
    </div>
</div>
</div>

<div id="J_GotoTop" class="elevator">
    <a href="/user/feedback" class="elevator-msg" target="_blank">
        <i class="imv2-feedback"></i>
        <span class="">意见反馈</span>
    </a>
    <a href="http://www.imooc.com/about/faq" class="elevator-faq" target="_blank">
        <i class="imv2-help_outline"></i>
        <span class="">常见问题</span>
    </a>
    <a href="http://www.imooc.com/mobile/app" target="_blank" class="elevator-app" >
        <i class="imv2-appdownload"></i>
        <span class="">APP下载</span>
        <div class="elevator-app-box"></div>
    </a>
    <a href="javascript:void(0)" class="elevator-weixin no-goto" id="js-elevator-weixin" >
        <i class="imv2-weixigzh"></i>
        <span class="">官方微信</span>
        <div class="elevator-weixin-box"></div>
    </a>
    <a href="javascript:void(0)" class="elevator-top no-goto" style="display:none" id="backTop">
        <i class="imv2-arrow2_u"></i>
        <span class="">返回顶部</span>
    </a>
</div>





<script type="text/javascript" src="js/require.js"></script>
<script src='js/jquery.min.js'></script>
<script src="js/ssologin.js"></script>
<script type="text/javascript" src="js/moco.min.js"></script>
<script>
requirejs.config({ 
    urlArgs: requirejsTimestamp,
    baseUrl: '/static/module/',
    skipDataMain: true,
    waitSeconds: 0,
    paths: {
        lib: '/static/lib',
        socketio: '/static/lib/socket.io/1.3.6/socket.io.min.js',
        store: '/static/lib/store/store.min.js',
		ueditor: '/static/lib/ueditor/ueditor.final.min.js',
        scrollbar: '/static/lib/scrollbar/jquery.scrollbar.js',
		juicer: '/static/lib/juicer/juicer.min.js',
		ace: '/static/lib/ace1.2.6/ace.js',
		//ace: '/static/lib/ace/src/ace.js',		
        pagination: '/static/lib/pagination/jquery.pagination.js',
		swfobject: '/static/lib/swfobject/2.2/swfobject.min.js',
		uploader: '/static/lib/webuploader/0.1.5/webuploader.js',

        jwplayer: '/static/lib/jwplayer/1.0.0/jwplayer.js',
        ide: '/static/lib/ide/dest/ide.min.js',
        autocomplete:'/static/lib/util/autocomplete.js',
        validate:'/static/lib/util/validate.js',
        placeholder:'/static/lib/util/placeholder.js',
        modalbutton:'/static/lib/util/modal.button.js',
        scrollbar: '/static/lib/scrollbar/jquery.scrollbar.js',
        SyntaxHighlighter:'/static/lib/ueditor/third-party/SyntaxHighlighter/shCore.js',
        socketio: '/static/lib/socket.io/1.3.6/socket.io.min.js',
        clipbord: '/static/lib/clipboard/dist/clipboard.min.js',
        jqueryValidate: '/static/lib/jquery-validate/jquery.validate.min.js'
    },
	shim: {
        'swfobject': {
            exports: 'swfobject'
        }
    }
});
</script>

<script type="text/javascript" src="js/common.js"></script>




<script data-entry="sc/js/index">
	requirejs(['sc/js/index'], function(){});
</script>
<script data-entry="templet/2/js/index">
requirejs(['templet/2/js/index'],function(){});
</script>


<script type="text/javascript">
  (function(){
    var imgPic = 'http://climg.mukewang.com/5836c00a0001916906000338.jpg',
        text = '我正在参加@慕课网 的职业路径【'+OP_CONFIG.plan_name+'】，很不错哦！快来一起学习吧！',
        url = 'http://class.imooc.com' + window.location.pathname;

    window._bd_share_config = {
        "common": {
            "bdUrl": url,
            "bdSnsKey": {
              'tsina':'2254855082'
            },
            "bdText": text,
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": imgPic,
            "bdStyle": "0",
            "bdSize": "16"
        },
        "share": {}
    };
    with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
  })();
</script>



<link rel="stylesheet" href="css/animate.min.css" type="text/css" />
<script type="text/javascript" src="js/wow.min.js"></script>
<script>
(function (){
	var wow = new WOW({
	  boxClass:     'wow',      // default
	  animateClass: 'animated', // default
	  offset:       0,          // default
	  mobile:       true,       // default
	  live:         true        // default
	})
	wow.init();
})()
</script>

<div style="display: none">
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?76783e78c7e55cc7eae7861a979dd444";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</div>
</body>
</html>
